<template>
	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
		class="demo-ruleForm" :size="formSize" status-icon>
		<el-form-item label="用户名称" prop="UserName">
			<el-input v-model="ruleForm.UserName" />
		</el-form-item>
		<el-form-item label="登录名称" prop="LoginName">
			<el-input v-model="ruleForm.LoginName" />
		</el-form-item>
		<el-form-item label="密码" prop="LoginPwd">
			<el-input v-model="ruleForm.LoginPwd" />
		</el-form-item>
		<el-form-item label="性别" prop="Sex">
			<el-input v-model="ruleForm.Sex" />
		</el-form-item>
	

		<!-- <el-form-item label="确认密码" prop="LoginPwds">
			<el-input v-model="ruleForm.Tel" />
		</el-form-item> -->
		<el-form-item label="手机号" prop="Tel">
			<el-input v-model="ruleForm.Tel" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">
				保存
			</el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
	import { ElNotification } from 'element-plus'

	import userapi from "@/api/userapi"
import { number } from 'echarts';

	const emit = defineEmits(['onSave'])

	interface RuleForm {
		UserName : string		
		LoginName : string
		LoginPwd:string	
		Sex:string	
		Tel : string	
			
	}

	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = reactive<RuleForm>({
		UserName: '',
		LoginName:'',
		LoginPwd:'',
		Sex:'',
		Tel:'',
		
	})
		
	const rules = reactive<FormRules<RuleForm>>({
		UserName: [
			{ required: true, message: '请输用户名称', trigger: 'blur' },
			{ min: 2, max: 5, message: '2-5个字符', trigger: 'blur' },
		],	
		LoginName:[
			{required:true,message:'请输入登录名称',trigger:'blur'},
			{ min: 2, max: 16, message: '2-5个字符', trigger: 'blur' },
		],
		LoginPwd:[
			{required:true,message:'请输入密码',trigger:'blur'},
			{ min: 6, max: 16, message: '6-16个数字', trigger: 'blur' },
		],
		Sex:[
			{required:true,message:'请输入性别',trigger:'blur'},
			{ min: 1, max: 1, message: '请输入男或者女', trigger: 'blur' },
		],
		Tel:[
			{required:true,message:'请输入手机号',trigger:'blur'},
			{ min: 11, max: 11, message: '11个数字的中国手机号', trigger: 'blur' },
		],
		
	})

	const submitForm = async (formEl : FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				userapi.Add(ruleForm).then(res => {
					if (res.code == 1) {
						ElNotification({
							title: 'Success',
							message: '添加成功',
							type: 'success',
							duration: 800,		
						})
							emit("onSave", true)
					} else {
						ElNotification({
							title: 'Error',
							message: '失败',
							type: 'Error',
							duration: 800,
						})
					}
				}).catch(err => {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'Error',
						duration: 800,
					})
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}

	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
	}
</script>